$(() => {

	// 淡入淡出借调函数
	const fadeX = {
		fadeX: function(Xin, Xout) {
			// 目标对象淡入，目标对象的其他兄弟元素淡出
			this.fadeIn(Xin).siblings().fadeOut(Xout)
		}
	}
	//	fadex.fadex.call(目标对象,fadein的参数,fadeout的参数)

	// 例：
	// fadeX.fadeX.call($('.video-tab>div').eq($(this).index()), '', 0)
	// $('.video-tab>div').eq($(this).index()).fadeIn().siblings().fadeOut(0)

	// banner部分

	// focus-nav部分：点击p标签后，自己获得active类，对应的大盒子淡入，另一个隐藏

	// focus-nav的点击事件
	$('.focus-nav p').click(function() {
		// $(this).addClass('active').siblings().removeClass('active')
		thisToOn($(this), 'active')
		// console.log($(this).index());
		fadeX.fadeX.call($('.focus-info>div').eq($(this).index()), '', 0)
		// $('.focus-info>div').eq($(this).index()).fadeIn().siblings().fadeOut(0)
	})

	// 改变需要移动盒子的宽度（增加一个图片的宽度），并在每个盒子里面的最后克隆第一个张图片添加上去
	$('.focus-info .bd').css('width', 4452)
	$('#newBanner .bd').append($('#newBanner .bd p').first().clone(true))
	$('#oldBanner .bd').append($('#oldBanner .bd p').first().clone(true))

	// 先添加盒子在进行定义
	const $newBannerPs = $('#newBanner .bd p')
	const $oldBannerPs = $('#oldBanner .bd p')
	const $newBannerLis = $('#newBanner .hd li')
	const $oldBannerLis = $('#oldBanner .hd li')
	const $newBanner = $('#newBanner')
	const $oldBanner = $('#oldBanner')
	const $focusInfo = $('.focus-map')
	let newBannerIndex = 0
	let oldBannerIndex = 3
	// 十周年页面的点击事件
	$newBannerLis.click(function() {
		thisToOn($(this), 'on')
		newBannerIndex = $(this).index()
		$newBannerPs.parent().animate({
			left: -newBannerIndex * $newBannerPs.width()
		})
	})
	// 经典页面的点击事件
	$oldBannerLis.click(function() {
		thisToOn($(this), 'on')
		oldBannerIndex = $(this).index()
		$oldBannerPs.parent().animate({
			left: -oldBannerIndex * $oldBannerPs.width()
		})
	})

	// 左右滑动轮播图
	function leftAuto(index, ps, lis) {
		index++
		// 索引的值根据图片对象的长度来判定
		if (index > ps.length - 1) {
			index = 1
			ps.parent().css('left', 0)
		}
		// 因索引最后一个值与$oldBannerLis对象的长度不一致，因此要对索引最后一个值判定后再赋值
		thisToOn(lis.eq(index == ps.length - 1 ? 0 : index), 'on')
		// lis.eq(index == ps.length - 1 ? 0 : index).addClass('on').siblings().removeClass('on')
		ps.parent().animate({
			left: -index * ps.width()
		})
		if (ps == $newBannerPs) newBannerIndex = index
		if (ps == $oldBannerPs) oldBannerIndex = index
	}

	// 封装定时器
	function timeId1() {
		// 十周年页面的自动轮播
		$newBanner.timeId = setInterval(() => {
			leftAuto(newBannerIndex, $newBannerPs, $newBannerLis)
		}, 3000)
		// 经典页面的自动轮播
		$oldBanner.timeId = setInterval(() => {
			leftAuto(oldBannerIndex, $oldBannerPs, $oldBannerLis)
		}, 3000)
	}
	timeId1()
	$focusInfo.mouseenter(() => {
		clearInterval($newBanner.timeId)
		clearInterval($oldBanner.timeId)
	})
	$focusInfo.mouseleave(timeId1)


	// 更改选中态
	function thisToOn(ele, cls) {
		ele.addClass(cls).siblings().removeClass(cls)
	}

	// 游戏资讯
	// 标题点击切换事件
	$('.press-all .hd li').click(function() {
		thisToOn($(this), 'on')
		fadeX.fadeX.call($('.press-all .bd div').eq($(this).index()), 100, 0)
		// .fadeIn(100).siblings().fadeOut(0)
	})

	// 玩法切换事件
	$('.heros .hd li').mouseover(function() {
		thisToOn($(this), 'on')
		// 中断前面的所有动画
		$('.heros .bd p').stop()
		fadeX.fadeX.call($('.heros .bd p').eq($(this).index()), '', '')
		// $('.heros .bd p').eq($(this).index()).fadeIn().siblings().fadeOut()
	})

	// 中间轮播图
	const $generalLis = $('.general .hd li')
	const $generalDivs = $('.general .bd>div')
	const $general = $('.general')
	// console.log($generalLis,$generalDivs);
	let genIndex = 4

	// 淡入淡出轮播图
	function fadeAuto() {
		// console.log(this);
		genIndex++;
		if (genIndex > $generalLis.length - 1) genIndex = 0
		thisToOn($generalLis.eq(genIndex), 'on')
		// $generalLis.eq(genIndex).addClass('on').siblings().removeClass('on')
		// $generalDivs.eq(genIndex).fadeIn().siblings().fadeOut()
		fadeX.fadeX.call($generalDivs.eq(genIndex), '', '')
	}
	// 立即调用函数
	function timeId3() {
		$general.timeId = setInterval(fadeAuto, 3000)
	}
	// 点击事件
	$generalLis.click(function() {
		thisToOn($(this), 'on')
		// $generalDivs.eq($(this).index()).fadeIn().siblings().fadeOut()
		fadeX.fadeX.call($generalDivs.eq($(this).index()).fadeIn(), '', '')
		genIndex = $(this).index()
	})
	// console.log($('.general .bd')[0]);
	timeId3()
	
	$general.mouseenter(() => {
		clearInterval($general.timeId)
	})
	$general.mouseleave(timeId3)
	 
	// 同人专区
	$('.picture .photo-name>li').click(function() {
		thisToOn($(this), 'on')
		fadeX.fadeX.call($('.photo-list').eq($(this).index()), '', 0)
		// $('.photo-list').eq($(this).index()).fadeIn().siblings().fadeOut(0)
	})

	// 视频中心
	$('.video-name li').click(function() {
		thisToOn($(this), 'on')
		fadeX.fadeX.call($('.video-tab>div').eq($(this).index()), '', 0)
		// $('.video-tab>div').eq($(this).index()).fadeIn().siblings().fadeOut(0)
	})

	// 合作媒体部分
	let topicIndex = 6
	const $picLis = $(' .picScroll-top li')
	const $picUl = $('.picList')
	const $picTop = $('.picScroll-top')
	// console.log($(' .picScroll-top li'))

	// 上下滚动轮播图
	function topAuto() {
		// console.log($picUl.height(), $picUl.parent().height(), $picLis.height())
		// console.log($picLis.length)
		topicIndex++
		// 不能用length，因为一次显示6个列表
		if (topicIndex > ($picUl.height() - $picUl.parent().height()) / $picLis.height()) topicIndex = 0
		// if (topicIndex >= $picLis.length) topicIndex = 0
		$picUl.animate({
			top: -topicIndex * $picLis.height()
		})
		// console.log($picUl.position().top)
	}

	function timeId2() {
		$picTop.timeId = setInterval(topAuto, 1500)
	}
	timeId2()
	$picTop.mouseenter(() => {
		clearInterval($picTop.timeId)
	})
	$picTop.mouseleave(timeId2)

	// 手风琴
	$('.indexTypes li .ratitle').click(function() {
		// 整个模块的宽度
		let allWidth = $('.indexTypes').width()
		// 目标值
		let currentWidth = $('.current').width()
		// console.log($('.indexTypes li').length)
		// console.log(allWidth)
		$(this).parent().addClass('current').animate({
			width: currentWidth
		}).siblings().removeClass('current').animate({
			width: (allWidth - currentWidth) / ($('.indexTypes li').length - 1)
		})
	})

})
